// Ellipsis Pulser ...
// options:   3 sizes (sm, md, lg)
//            light and dark versions
//            supports prepended [text]...
// examples:  http://codepen.io/sg00dwin/pen/WxXYEN
// -------------------------------------------------------------

@dot-size-sm: 4px;
@dot-size-md: 8px;
@dot-size-lg: 12px;
@dot-size-default: @dot-size-sm;
@transform-scale: 1;
@font-size-default: @font-size-base;
@ellipsis-color-dark: hsla(200, 0%, 20%, 1); // #333333
@ellipsis-color-light: hsla(200, 0%, 70%, 1); // #b3b3b3


.ellipsis-pulser {
  padding: 10px;
  text-align: center;
  .dot {
    display: inline-block;
    height: @dot-size-default;
    position: relative;
    width: @dot-size-default;
    &:before {
      animation-name: anim;
      animation-duration: 1.5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: normal;
      border-radius: 100em;
      content: " ";
      display: block;
      height: 100%;
      left: 0px;
      opacity: .33;
      position: absolute;
      top: 0px;
      transform-origin: 50% 50%;
      transform: scale(@transform-scale * .66);
      width: 100%;
    }
    &:nth-of-type(+1):before {
      animation-delay : .25s;
    }
    &:nth-of-type(+2):before {
      animation-delay : .5s;
    }
    &:nth-of-type(+3):before {
      animation-delay : .75s;
    }
  }

  // Ellipsis sizes
  &.ellipsis-sm {
    .dot {
      height: @dot-size-sm;
      width: @dot-size-sm;
    }
    .ellipsis-msg {
      // Small defaults to use parent font-size and color
      color: inherit;
    }
  }
  &.ellipsis-md {
    .dot {
      height: @dot-size-md;
      margin-bottom: -2px;
      width: @dot-size-md;
    }
    .ellipsis-msg {
      font-size: (@font-size-default + 5);
      font-weight: 300;
      margin-right: 3px;
    }
  }
  &.ellipsis-lg {
    .dot {
      height: @dot-size-lg;
      margin-bottom: -2px;
      width: @dot-size-lg;
    }
    .ellipsis-msg {
      font-size: (@font-size-default + 13);
      font-weight: 300;
      margin-right: 6px;
    }
  }
  // Use on light backgrounds
  &.ellipsis-dark {
    .dot {
      &.pulse:before, &.pulse:after {
        background: @ellipsis-color-dark;
      }
    }
    .ellipsis-msg {
      color: @ellipsis-color-dark;
    }
  }
  // Use on dark backgrounds
  &.ellipsis-light {
    .dot {
      &.pulse:before, &.pulse:after {
        background: @ellipsis-color-light;
      }
    }
    .ellipsis-msg {
      color: @ellipsis-color-light;
    }
  }
  // Use when inline and/or not centered
  &.ellipsis-inline {
    display: inline-block;
    padding: 0 3px 0 0;
  }
}

@keyframes anim {
  0% {
    opacity: .33;
    transform: scale(@transform-scale * .66);
  }
  35% {
    opacity: 1;
    transform: scale(@transform-scale);
  }
  70% {
    transform: scale(@transform-scale * .66);
  }
  100% {
    opacity: .33;
    z-index: 1;
  }
}
